<template lang="html">
  <div class="nav-group form-contain">
    <div class="show-box">
      <div class="nav-show">
        <img src="/static/图层0.png" alt="">
        <div class="content-show">
          <div class="" v-for='item in menu' :key='item.key'>
            <div :class='item.key'>
              <el-carousel class="model-scroll" v-if='item.key === 1'>
                <el-carousel-item v-for="(item, index) in imgs" :key="index">
                  <img :src="item.img" alt="">
                </el-carousel-item>
              </el-carousel>
              <div class="text-show" v-if='content !== "" && item.key === 2' v-html='content'>
              </div>
              <div class='goods-show' v-if='item.key === 3'>
                <ul v-if='goods.length'>
                  <li v-for='(item, index) in goods'>
                    <img :src="item.image_url" alt="">
                    <span class="shop-name">{{item.goods_name}}</span>
                    <span class="shop-price">￥{{item.goods_price}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="goods-sort">
        <div class="text-center">
          拖动卡片进行排序
        </div>
        <draggable :list="menu">
          <transition-group name="list-complete" tag="div">
            <div class="tag list-complete-item" v-for='(item, index) in menu' :key='index'>
              <div class="text-center">
                {{item.name}}
              </div>
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>
    <div class="form-box">
      <div class="nav-form">
        <div class="component-model">
          <div class="component-model--title">
            图片广告
          </div>
          <img-group @upData='changeData' :image='images' class="component-model--content"></img-group>
        </div>
        <div class="component-model">
          <div class="component-model--title">
            文本
          </div>
          <vue-editor v-model="content"></vue-editor>
        </div>
        <div class="component-model">
          <div class="component-model--title">
            课程
          </div>
          <shop-group @upGoods='changeGoods' :goods='selectGoods' class="component-model--content"></shop-group>
        </div>
        <div class="component-model">
          <div class="component-model--title">
            联系我们
          </div>
          <div style="padding: 10px">
            <span>是否添加联系我们</span>
            <el-radio-group v-model="shop_type">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class='el-button el-button--primary' style="margin-top: 20px" type='button' @click='saveAll'>
          保存修改
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addNavDetail, getNavDetail } from '@/api/navs'
import imgGroup from './imgGroup'
import shopGroup from './shopGroup'
import draggable from 'vuedraggable'
import { VueEditor } from 'vue2-editor'

export default {
  components: {
    imgGroup,
    shopGroup,
    draggable,
    VueEditor
  },
  data () {
    return {
      imgs: [],
      texts: '',
      menu: [
        {
          key: 1,
          name: '图片广告'
        },
        {
          key: 2,
          name: '文本'
        },
        {
          key: 3,
          name: '课程'
        },
        {
          key: 4,
          name: '联系我们'
        }
      ],
      images: {
        img: [],
        url: []
      },
      shop_type: 1,
      goods: [],
      selectGoods: []
    }
  },
  created () {
    getNavDetail({navigate_id: this.$route.query.nav_id}).then(res => {
      this.content = res.data[0].content
      this.images = res.data[0].imgs[0]
      this.imgs = res.data[0].imgs[0].img
      this.shop_type = res.data[0].show_type
      this.selectGoods = res.data[0].goods
    })
  },
  methods: {
    changeData (images) {
      this.imgs = images
      this.$set(this, 'imgs', images)
    },
    changeText (text) {
      this.$set(this, 'texts', text)
    },
    changeGoods (goods) {
      this.$set(this, 'goods', goods)
    },
    saveAll () {
      let arys = []
      this.menu.forEach((item, index) => {
        arys.push(item.key)
      })
      addNavDetail({content: this.content, navigate_id: this.$route.query.nav_id || 0, imgs: this.imgs, shop_type: this.shop_type, goods: this.goods, sort: arys.join('-')}).then(res => {
        if (res.code === 1) {
          this.$message({
            type: 'success',
            message: '更新成功！'
          })
        }
      })
    }
  }
}
</script>

<style lang="less">
.list-complete-item {
  transition: all 1s;
}
.list-complete-leave-active {
  position: absolute;
}
.show-box{
  width: 40%;
  min-width: 415px;
  float: left;
  overflow: hidden;
  .nav-show{
    width: 415px;
    margin: 0 auto;
    position: relative;
    img{
      width: 415px;
    }
    .content-show{
      width: 375px;
      top: 100px;
      left: 20px;
      overflow-y: scroll;
      border: 1px solid #333;
      height: 667px;
      position: absolute;
      .model-scroll{
        width: 375px;
        height: 187px;
        .el-carousel__container{
          width: 100%;
          height: 100%;
        }
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .content-show::-webkit-scrollbar{
      width: 4px;
      height: 1px;
    }
    .content-show::-webkit-scrollbar{
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: #535353;
    }
    .content-show::-webkit-scrollbar{
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 10px;
      background: #EDEDED;
    }
  }
  .text-show{
    width: 375px;
    box-sizing: border-box;
    padding: 15px;
    background-color: #e5e5e5;
  }
  .goods-show{
    ul{
      overflow: hidden;
      margin: 0;
      padding: 15px;
      li{
        margin: 0;
        float: left;
        list-style: none;
        width: 160px;
        height: 210px;
        .shop-name{
          color: #333;
          text-align: center;
          display: block;
        }
        .shop-price{
          text-align: center;
          color: #ff0808;
          display: block;
        }
        &:nth-child(2n + 1) {
          margin-right: 15px;
        }
        img{
          width: 160px;
          height: 160px;
        }
      }
    }
  }
  .goods-sort{
    margin: 0 auto;
    height: 250px;
    width: 415px;
    padding: 15px 0;
    .tag{
      height: 50px;
      line-height: 50px;
      cursor: pointer;
      border-bottom: 1px solid #ededf9;
      box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
      &:focus{
        cursor: move;
      }
    }
  }
}
.paixu{
  text-align: center;
  font-size: 12px;
  line-height: 50px;
  a{
    color: #888;
  }
}
.form-box{
  width: 60%;
  float: left;
  .nav-form{
    width: 500px;
    margin: 0 auto;
    .component-model{
      & + .component-model{
        margin-top: 20px;
      }
      border: 1px solid #dddddd;
      .component-model--title{
        background-color: #409EFF;
        line-height: 30px;
        text-align: center;
        color: white;
      }
      .component-model--content{
        padding: 15px;
        box-sizing: border-box;
      }
    }
  }
}
</style>
